<template>
    <div class="demo-collapse">
   <el-collapse accordion>
     <el-collapse-item name="1">
       <template #title>&nbsp;&nbsp;
         展开查询<el-icon class="header-icon">
           <info-filled />
         </el-icon>
       </template>
       <div>
           <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
           <el-col :span="6"><div class="grid-content ep-bg-purple" />
            订单编号 <el-input v-model="form.ordersNo" style="width: 320px" />
       
          </el-col>
           <el-col :span="6" style="margin-left: 170px"><div class="grid-content ep-bg-purple" />
            订单名称<el-input v-model="form.ordersName" style="width: 320px"  />
          
           </el-col>

           <el-col :span="6" ><div class="grid-content ep-bg-purple" />
       <span style="margin-left: 170px">订单类型</span><el-select v-model="form.ordersTypeId" style="width: 320px;margin-left: 170px"   >
        <el-option label="请选择" :value="0" />
            <el-option v-for="item in options" :label="item.ordersTypeName" :value="item.ordersTypeId"/>
        </el-select>
   </el-col>
       </el-row>
         
       <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
       <el-col :span="6" ><div class="grid-content ep-bg-purple" />
        客户<el-select v-model="form.customerId" style="width: 320px"  >
            <el-option label="请选择" :value="0" />
            <el-option v-for="item in options1" :label="item.customerName" :value="item.customerId"/>
       </el-select>
   </el-col>
   <el-col :span="6" style="margin-left: 170px"><div class="grid-content ep-bg-purple" />
    所属项目<el-select v-model="form.projectId"  style="width: 320px"  >
        <el-option label="请选择" :value="0" />
        <el-option v-for="item in options2" :label="item.projectName" :value="item.projectId"/>
   </el-select>
   </el-col>

   <el-col :span="6" ><div class="grid-content ep-bg-purple" />
       <span style="margin-left: 170px">状态</span><el-select v-model="form.ordersState" style="width: 320px;margin-left: 170px"   >
        <el-option label="有效" :value="true" />
        <el-option label="无效" :value="false" />
       </el-select>
   </el-col>

   <el-col :span="6" style="margin-left: 1000px;"><div class="grid-content ep-bg-purple" />
       <el-button @click="resetForm()">重置</el-button>
       <el-button type="primary" style="width: 100px;" @click="GetORdersShow()">查询</el-button>
   </el-col>
 </el-row>
       </div>
     </el-collapse-item>

   </el-collapse>
 </div>

   
  <div style="background-color: white;width: 100%;height: 100%;">
       <h3 style="margin: 15px;">
           <span style="font-size: 17px;font-weight: 700;">销售订单</span>
       </h3>
       <el-button type="success" style="float: right;margin-top: -40px;margin-right: 170px;" @click="ORderAdd()">+新增订单</el-button>
       <el-button type="success" style="float: right;margin-top: -40px;margin-right: 90px;" @click="Dane()">导出</el-button>
       <!-- 按钮绑定打印 -->
        <el-button type="primary" style="float: right;margin-top: -40px;margin-right: 20px;"  v-print="{popTitle:'销售订单报告',id: 'printDiv'}">打印</el-button>
       <hr  style='background-color:#d3d3d3; height:1px; border:none;'>
         <div style="margin: 20px;">
           <el-table id="printDiv" :data="tableData" stripe style="width: 100%" border :header-cell-style="{background:'#f5f7fa'}">
           <el-table-column prop="ordersId" label="序号" width="80px" />
           <el-table-column prop="ordersNo" label="订单编号" width="150px" />
           <el-table-column prop="ordersName" label="订单名称" width="120px"  />
           <el-table-column prop="ordersTypeName" label="订单类型" width="120px"/>
           <el-table-column prop="projectName" label="所属项目" width="150px" />
           <el-table-column prop="customerName" label="客户" width="170px" />
           <el-table-column prop="signedTime" label="签订时间" width="120px" />
           <el-table-column prop="salesman" label="销售员" width="120px" />
           <el-table-column prop="departmentName" label="销售部门" width="120px" />
           <el-table-column prop="handleTime" label="创建时间" width="170px" >
             <template #default="scope">
               {{ scope.row.handleTime.substring(0,10)}}
             </template>
           </el-table-column>
           <el-table-column prop="handle" label="创建人" width="80px"/>
           <el-table-column prop="ordersState" label="状态" width="90px" >
               <template #default="scope">
                   <el-tag v-if="scope.row.ordersState == 1" type="success">有效</el-tag>
                   <el-tag v-else type="danger">无效</el-tag>
               </template>
           </el-table-column>
           <el-table-column prop="status" label="审批状态" width="90px" >
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="info">未提交</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="primary">已提交</el-tag>
                    <el-tag v-if="scope.row.status == 2" type="success">已审批</el-tag>
                    <el-tag v-if="scope.row.status == 3" type="warning">已驳回</el-tag>
                    
                </template>
            </el-table-column> 
           
           <el-table-column label="操作" >
               <template #default="scope">
                   <el-button  size="small" @click="OrderUpdate(scope.row.ordersId)">编辑</el-button>
               </template>
           </el-table-column>
       </el-table>

       <!-- 分页 -->
       <div >
         <el-pagination
                 v-model:current-page="form.pageIndex"
                 v-model:page-size="form.pageSize"
                 layout="prev, pager, next"
                 :total="form.totalcount"
                 class="mt-4"
                 @current-change="handleCurrentChange"
                 style="float: right;"
               />
               <span style="float: right;margin-top: 4px">共{{ form.totalcount }}条</span>
       </div>
 
     </div>
 </div>
 

  
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import { ElNotification } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;

const router = useRouter()
const route = useRoute()

//查询
const form=reactive({
    ordersNo:'',
    ordersName:'',
    ordersTypeId:0,
    customerId:0,
    projectId:0,
    ordersState:true,

   pageIndex:1,
   pageSize:4,
   totalcount:0,
   pagecount:0,
})

const tableData = ref([])
const GetORdersShow=()=>{
   axios.post(apiurl+'/api/ShowProduction/GetOrdersShow',form).then((res)=>{
       tableData.value = res.data.data.list
       form.totalcount=res.data.data.totalcount
       form.pagecount=res.data.data.pagecount
       console.log(res)
   })
}

const ferte=reactive({
    
})

//订单类型
const options=ref([])
const OrderType=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetOrdersTypeShow',ferte).then((res)=>{
        options.value=res.data.data
    })
}

//客户
const options1=ref([])
const Custumer=()=>{
    axios.get(apiurl+'/api/ShowProduction/GetCustome').then((res)=>{
        options1.value=res.data.data
    })
}

//项目
const options2=ref([])
const Projects=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetProjectShow',ferte).then((res)=>{
        options2.value=res.data.data
    })
}



//重置
const resetForm=()=>{
   form.ordersNo=''
   form.ordersName=''
   form.ordersTypeId=0
   form.customerId=0
   form.projectId=0
   form.ordersState=true
   GetORdersShow()
}

//新增
const ORderAdd=()=>{
   router.push('/OrdersAdd')
}

//导出
const Dane=()=>{
    location.href=`http://localhost:5195/api/ShowProduction/ExportExcel`;
}



//分页
const handleCurrentChange = (val: number) => {
   form.pageIndex = val;
   GetORdersShow();
};

const OrderUpdate=(ordersId:any)=>{
  router.push({path:'/ordersUpdate',query:{ordersId:ordersId}})
}



onMounted(()=>{
    GetORdersShow()
    OrderType();
    Custumer()
    Projects()
})

</script>
<style>
.el-row {
 margin-bottom: 20px;
}
.el-row:last-child {
 margin-bottom: 0;
}
.el-col {
 border-radius: 4px;
}

.grid-content {
 border-radius: 4px;
 min-height: 36px;
}


</style>
